<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美日生鲜</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="topbar">
        <div class="topbar_main">
            <img src="images/icons/icon-top-1@2x.png" alt="" class="icon-home">
            <span>每日生鲜</span>
            <img src="images/icons/icon-top-2@2x.png" alt="" class="icon-position">
            <span>浙江</span>
            <ul>
                <li>登录 |</li>
                <li>注册 |</li>
                <li>购物车 |</li>
                <li>我的收藏 |</li>
                <li>消息 |</li>
                <li>商城小程序</li>
            </ul>
        </div>
    </div>
    <header class="site-header clear"> <!-- header 语义化 -->
        <img src="images/logo@2x.png" class="logo" alt="">
        <div class="header_search">
            <input type="text" placeholder="纯牛奶">
            <button>搜索</button>
        </div>
        <button class="header-button">
            <img src="images/icons/icon-cart-1@2x.png" alt="">
            <span>我的购物车</span>
        </button>
        <button class="header-button">
            <img class="icon_qr" src="images/icons/icon-qr-1@2x.png" alt="">
            <span>扫码享受优惠</span>
        </button>
    </header>
    <div class="menu">
        <div class="menu_head">
            <div class="menu_head_left">
                <span>美日生鲜商品分类</span>
            </div>
            <ul class="menu-head-mid">
                <li class="color-blue">生鲜首页</li>
                <li>韩帮菜</li>
                <li>精选好物</li>
                <li>样样新鲜</li>
                <li>中秋活动</li>
            </ul>
            <ul class="menu_head_r">
                <li><img src="images/icons/icon-banner-1@2x.png" alt=""> 品质保障</li>
                <li><img src="images/icons/icon-banner-2@2x.png" alt=""> 一站式购齐</li>
                <li><img src="images/icons/icon-banner-3@2x.png" alt=""> 满88免配送费</li>
            </ul>
        </div>

        <div class="menu_content">
            <aside>
                <ul>
                    <li>
                        <div class="menu_item_icon"><img src="images/icons/icon-banner-4@2x.png" alt=""></div>
                        <div class="menu_item_content">
                            <div class="item_content_top">
                                <span>新鲜水果</span>
                                <img src="images/icons/icon-banner-10@2x.png" class="item_right_arrow" alt="">
                            </div>
                            <div class="item_content_bottom">
                                海鲜礼盒 | 鱼类 | 贝类
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="menu_item_icon"><img src="images/icons/icon-banner-5@2x.png" alt=""></div>
                        <div class="menu_item_content">
                            <div class="item_content_top">
                                <span>新鲜水果</span>
                                <img src="images/icons/icon-banner-10@2x.png" class="item_right_arrow" alt="">
                            </div>
                            <div class="item_content_bottom">
                                海鲜礼盒 | 鱼类 | 贝类
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="menu_item_icon"><img src="images/icons/icon-banner-6@2x.png" alt=""></div>
                        <div class="menu_item_content">
                            <div class="item_content_top">
                                <span>新鲜水果</span>
                                <img src="images/icons/icon-banner-10@2x.png" class="item_right_arrow" alt="">
                            </div>
                            <div class="item_content_bottom">
                                海鲜礼盒 | 鱼类 | 贝类
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="menu_item_icon"><img src="images/icons/icon-banner-7@2x.png" alt=""></div>
                        <div class="menu_item_content">
                            <div class="item_content_top">
                                <span>新鲜水果</span>
                                <img src="images/icons/icon-banner-10@2x.png" class="item_right_arrow" alt="">
                            </div>
                            <div class="item_content_bottom">
                                海鲜礼盒 | 鱼类 | 贝类
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="menu_item_icon"><img src="images/icons/icon-banner-8.png" alt=""></div>
                        <div class="menu_item_content">
                            <div class="item_content_top">
                                <span>新鲜水果</span>
                                <img src="images/icons/icon-banner-10@2x.png" class="item_right_arrow" alt="">
                            </div>
                            <div class="item_content_bottom">
                                海鲜礼盒 | 鱼类 | 贝类
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="menu_item_icon"><img src="images/icons/icon-banner-9@2x.png" alt=""></div>
                        <div class="menu_item_content">
                            <div class="item_content_top">
                                <span>新鲜水果</span>
                                <img src="images/icons/icon-banner-10@2x.png" class="item_right_arrow" alt="">
                            </div>
                            <div class="item_content_bottom">
                                海鲜礼盒 | 鱼类 | 贝类
                            </div>
                        </div>
                    </li>
                </ul>
            </aside>
            <div class="swiper">
                <div class="swiper_button_next">
                    <img src="images/icons/icon-banner-11@2x.png" alt="">
                </div>
                <div class="swiper_button_prev">
                    <img src="images/icons/icon-banner-12@2x.png" alt="">
                </div>
                <div class="swiper_pagination">
                    <span class="swiper-active"></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
    </div>
</body>

</html>